<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>多年多次签证</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<!--标准mui.css-->
		<link rel="stylesheet" href="../css/mui.min.css">
		<link rel="stylesheet" href="../css/common.css" />
		<style>
			* {
				margin: 0px;
				padding: 0px;
			}
			.mui-content {
				width: 100%;
			}
			.many-time-container {
				width: 100%;
				background-color: #FFFFFF;
				padding: 10px 0px 15px 0px;
				text-align: -webkit-center;
			}
			.top-nav-container {
				width: 100%;
				text-align: left;
			}
			.top-back-div {
				height: 35px;
				width: 45px;
			}
			.top-back-div img {
				width: 25px;
				height: 25px;
				margin-left: 10px;
				margin-top: 5px;
				transform:rotate(90deg);
			}
			.visa-type-img {
				width: 100px;
				height: 100px;
				border-radius: 50px;
			}
			.visa-type-title {
				font-size: 14px;
				color: #919090;
				margin-top: 10px;
			}
			.visa-type-tips {
				font-size: 12px;
				color: #919090;
				margin-top: 10px;
			}
			.addr-panel {
				position: relative;
				margin-top: 20px;
			}
			.addr-choose-div {
				width: 180px;
				height: 40px;
				opacity: 0.75;
				/*border: 1px solid #FFFFFF;*/
				background-color: #101010;
				border-radius: 29px;
			}
			.addr-choose-div div {
				font-size: 14px;
				color: #FFFFFF;
				line-height: 40px;
				display: inline-block;
			}
			.addr-title {
				width: 80px;
			}
			.addr-city {
				width: 70px;
			}
			.addr-city img{
				margin-left: 5px;
				width: 24px;
				height: 24px;
				margin-bottom: 8px;
				vertical-align: middle;
			}
			.ul-goods {
				width: 100%;
			}
			.li-goods {
				margin: 10px 5px 0px 5px;
				text-align: center;
				border-radius: 4px;
				background-color: #FFFFFF;
				position: relative;
			}
			.shadow-div {
				width: 100%;
				height: 120px;
				position: absolute;
				left: 0;
				top: 0;
				background-color: #000000;
				opacity: 0.3;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			.goods-img {
				width: 100%;
				height: 120px;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}
			.goods-name {
				font-size: 14px;
				color: #919090;
				margin-top: 5px;
			}
			.goods-price {
				font-size: 13px;
				color: #919090;
				padding: 5px 0px;
			}
			.bounced-box-container {
				display: none;
				width: 100%;
				height: 100%;
				position: fixed;
				left: 0px;
				top: 0px;
			    z-index: 10;
		        overflow-y: scroll;
				background-color: rgba(0, 0, 0, 0.7);
			}
			.addr-choose-container {
				width: 80%;
				height: 300px;
				margin-left: 10%;
				background-color: #FFFFFF;
				border-radius: 5px;
				margin-top: 40%;
				text-align: center;
			}
			.live-title {
				padding-top: 8px;
				margin-bottom: 10px;
				font-size: 15px;
				color: #000000;
				font-family: "PingFang-SC-Regular";
			}
			.line-div {
				width: 100%;
				height: 1px;
				background-color: #F3F3F3;
			}
			.province-ul {
				width: 100%;
				height: 250px;
				overflow-y:scroll;
				text-align: left;
			}
			.province-li {
				margin-left: 7%;
    				width: 24%;
    				margin-top: 15px;
				padding: 5px 0px;
				display: inline-block;
				text-align: center;
				border: 1px solid #ECECEC;
				border-radius: 4px;
				font-family: 'PingFangSC-Regular';
				font-size: 14px;
				color: #333333;
			}
			.goods-id, .cuntry-id {
				display: none;
			}
			.country-container {
				position: absolute;
				left: 10px;
				bottom: 10px;
			}
			.country {
				font-size: 18px;
				color: #FFFFFF;
				font-family: "PingFang-SC-Regular";
			}
			.visa-type-span {
				margin-left: 10px;
				font-size: 13px;
				color: #FFFFFF;
				padding: 0px 3px;
				border: 1px solid #FFFFFF;
				font-family: "PingFang-SC-Regular";
			}
			.country-img {
				width: 34px;
				height: 22px;
				vertical-align: sub;
			}
		</style>
	</head>

	<body>
		<div class="mui-content">
			<div class="many-time-container">
				<div class="top-nav-container">
					<div class="top-back-div">
						<img src="../img/detail/down_icon.png" />
					</div>
				</div>
				<img class="visa-type-img" src="../img/index/duoci_image.png" />
				<div class="visa-type-title">多年多次签证</div>
				<div class="visa-type-tips">一次办理随时出发，就是这么任性</div>
			</div>
			<div class="ul-goods">
				<!--<div class="li-goods">
					<img class="goods-img" src="../img/index/shuijiao.jpg" />
					<div class="goods-name">【全国受理】英国旅游签-两年多次</div>
					<div class="goods-price">¥666</div>
				</div>-->
			</div>
		</div>
		<div id="allmap"></div>
	</body>
	<script type="text/javascript" src="../js/thirdparty/jquery-3.3.1.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/mui.min.js" ></script>
	<script type="text/javascript" src="../js/thirdparty/spin.min.js" ></script>
	<script type="text/javascript">
		document.write('<script type="text/javascript" src="../js/utils/boot.js?v='+new Date().getTime()+'" ><\/script>');
	</script>
	<script type="text/javascript">
		var customerId = base.getParameter("customerId");
		$(function() {
			getGoodsByGoodsType();
		})
		function getGoodsByGoodsType() {
			base.setWait("正在获取数据...");
			base.postData(base.url.getGoodsByGoodsType, {goodsType: 1}, getGoodsByGoodsTypeSuccess)
		}
		function getGoodsByGoodsTypeSuccess(data) {
			if (data.success) {
				var list = data.extendData.goodsList;
				var html = '';
				for(var index in list) {
					html+=getGoodsItemHtml(list[index]);
				}
				$(".ul-goods").html(html);
			} else {
				mui.toast(data.message);
			}
		}
		function getGoodsItemHtml(item) {
			var html = '';
			html+='<div class="li-goods">'
			html+='	<div class="goods-id">'+item.goodsId+'</div>'
			html+='	<div class="cuntry-id">'+item.cuntryId+'</div>'
			html+='	<img class="goods-img" src="'+item.countryImg+'" />'
			html+='	<div class="shadow-div">'
			html+='		<div class="country-container">'
			html+='			<span class="country">'+item.countryName+'</span>'
			html+='			<span class="visa-type-span">'+item.goodsType+'</span>'
			html+='		</div>'
			html+='	</div>'
			html+='	<div class="goods-name">'+item.goodsName+'</div>'
			html+='	<div class="goods-price">¥'+item.presentPrice+'</div>'
			html+='</div>'
			return html;
		}
		$(".ul-goods").on("tap", ".li-goods", function() {
			var _goodsId = $(this).find('.goods-id').text();
			var _cuntryId = $(this).find('.cuntry-id').text();
			window.location.href="packageChooseDetail.html?cuntryId="+_cuntryId+'&customerId='+customerId;
		})
		$('.top-nav-container').on('tap', '.top-back-div', function() {
			mui.back();
		})
	</script>
</html>